/**
 * Copyright (c) 2018-present, Chen Guodong
 * All rights reserved.
 *
 * @flow
 */


<template>
  <div :class="['footer', onePageVis ? 'show' : 'hide']">
    <div class="footer-row">
      <div class="footer-cell">
        <div class="main">
          <el-row
            :gutter="24"
            style="height: 100%;"
            v-show="onePageData.area && onePageData.area.progress || onePageData.area.progress === 0 "
          >
            <el-col :span="8" style="height: 100%;">
              <v-chart auto-resize :options="chart1" v-if="onePageData.area"/>
            </el-col>
            <el-col
              :span="16"
              style="height: 100%;display: flex;justify-content: center;flex-direction: column;align-content: center;padding-left: 0;"
            >
              <div
                class="num"
              >{{onePageData.area && Math.round(onePageData.area.progress)}}/{{onePageData.area && Math.round(onePageData.area.total)}}</div>
              <div class="text">完成面积/总面积(万平方)</div>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="footer-cell">
        <div class="main">
          <el-row
            :gutter="24"
            style="height: 100%;"
            v-show="onePageData.user && onePageData.user.progress || onePageData.user.progress === 0 "
          >
            <el-col :span="8" style="height: 100%;">
              <v-chart auto-resize :options="chart2"/>
            </el-col>
            <el-col
              :span="16"
              style="height: 100%;display: flex;justify-content: center;flex-direction: column;align-content: center;padding-left: 0;"
            >
              <div
                class="num"
              >{{onePageData.user && Math.round(onePageData.user.progress)}}/{{onePageData.user && Math.round(onePageData.user.total)}}</div>
              <div class="text">已完成/总户数(户)</div>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="footer-cell">
        <div class="main">
          <el-row
            :gutter="24"
            style="height: 100%;"
            v-show="onePageData.amount && onePageData.amount.payed || onePageData.amount.payed === 0 "
          >
            <el-col :span="8" style="height: 100%;">
              <v-chart auto-resize :options="chart3"/>
            </el-col>
            <el-col
              :span="16"
              style="height: 100%;display: flex;justify-content: center;flex-direction: column;align-content: center;padding-left: 0;"
            >
              <div
                class="num"
              >{{onePageData.amount && Math.round(onePageData.amount.payed/10000 || 0)}}/{{onePageData.amount && Math.round(onePageData.amount.total/10000)}}</div>
              <div class="text">已拨付/总资金(万元)</div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ECharts from "vue-echarts";

const getOptions = (color, text, complete = 0, total = 0) => {
  let option = {
    animation: true,
    series: [
      {
        type: "pie",
        center: ["50%", "50%"], //圆心坐标（div中的%比例）
        radius: ["90%", "80%"], //半径
        hoverAnimation: false,
        itemStyle: {
          //上层样式
          normal: {
            color: color,
            label: {
              show: true,
              position: "center",
              formatter: "{b}",
              textStyle: {
                baseline: "bottom",
                fontSize: window.chartFontSize*0.7
              }
            },
            labelLine: {
              show: false
            }
          }
        }, //graphStyleA,//图形样式 // 当查到的数据不存在（并非为0），此属性隐藏
        data: [
          {
            name: text,
            value: (complete / total) * 100,
            hoverAnimation: false,
            itemStyle: {
              //上层样式
              normal: {
                color: color,
                label: {
                  show: true,
                  position: "center",
                  formatter: "{b}",
                  textStyle: {
                    baseline: "bottom",
                    fontSize: window.chartFontSize*0.7
                  }
                },
                labelLine: {
                  show: false
                }
              }
            }
          },
          {
            name: (Math.round((complete / total) * 100) || 0) + "%",
            value: 100,
            itemStyle: {
              normal: {
                color: "#99ccff",
                label: {
                  show: true,
                  position: "center",
                  fontSize: window.chartFontSize*0.7
                },
                labelLine: {
                  show: false
                }
              }
            }
          }
        ]
      }
    ]
  };
  return option;
};
export default {
  props: {
    onePageVis: Boolean,
    onePageData: Object
  },
  data() {
    return {
      chart1: getOptions("#3385ff", "征收面积"),
      chart2: getOptions("#cba304", "征收户数"),
      chart3: getOptions("#2a7d1d", "预算金额")
    };
  },
  watch: {
    onePageData: function(data) {
      this.chart1 = getOptions(
        "#3385ff",
        "征收面积",
        data.area && data.area.progress,
        data.area && data.area.total
      );
      this.chart2 = getOptions(
        "#cba304",
        "征收户数",
        data.user && data.user.progress,
        data.user && data.user.total
      );
      this.chart3 = getOptions(
        "#2a7d1d",
        "预算金额",
        data.amount && data.amount.payed,
        data.amount && data.amount.total
      );
    }
  },
  methods: {},
  components: {
    "v-chart": ECharts
  }
};
</script>

<style lang='less' scoped>
@import "../../utils/theme.less";
.pageOne {
}
.footer {
  transition: transform ease-out 0.6s;
  position: absolute;
  left: 0;
  bottom: 10%;
  height: 10%;
  min-height: 80px;
  width: 100%;
  z-index: 9;
  padding: 0 8vw;
  .footer-row {
    width: 100%;
    height: 100%;
    .footer-cell {
      display: inline-block;
      width: 33.333333%;
      height: 100%;
      padding: 0 0.5vw;
      .main {
        width: 100%;
        height: 100%;
        background-color: rgba(33, 33, 33, 0.8);
        overflow: hidden;
        padding: 0.5vw;
        .num,
        .text {
          text-align: left;
          font-weight: 500;
        }
        .num {
          font-size: 1.8rem;
          vertical-align: middle;
          // margin-top: 1.4vw;
          font-family: "digifacewide";
        }
        .text {
          font-size: 1.2rem;
          margin-top: 1vw;
          color: @font-regular;
        }
      }
    }
  }
}

.hide {
  transform: translate3d(-100%, 0, 0px);
}

.show {
  transform: translate3d(0px, 0px, 0px);
}
</style>
